<template>
  <div class="refundOrdersDetail pageWrapper">
    <Loading :loading="loading">
      <Form :ref="formRef" :label-width="130" :model="formData" inline>
        <Card :bordered="true">
          <p slot="title">退款信息</p>
        <FormItem label="退款订单号:" style="width:30%">
          <div>{{formData.refundId }}</div>
        </FormItem>
        <FormItem label="退款支付订单号:" style="width:30%">
          <!-- @click="bandleChilder(formData.payFlowId)" class="orderList"-->
          <div>{{formData.payFlowId}}</div>
        </FormItem>
        <FormItem label="渠道退款订单号:" style="width:30%">
          <div>{{formData.flowId}}</div>
        </FormItem>
        <FormItem label="源渠道支付订单号:" style="width:30%">
          <div>{{formData.payFlowId}}</div>
        </FormItem>
        <FormItem label="商品编码:" style="width:30%">
          <div>{{formData.productCode}}</div>
        </FormItem>
        <FormItem label="商品名称:" style="width:30%">
          <div>{{formData.productName}}</div>
        </FormItem>
        <FormItem label="商户编码:" style="width:30%">
          <div>{{formData.merchantCode}}</div>
        </FormItem>
        <FormItem label="商户名称:" style="width:30%">
          <div>{{formData.merchantName}}</div>
        </FormItem>
        <FormItem label="申请退款金额:" style="width:30%">
          <div>{{formData.refundApplyAmount >= 0 ? `${formData.refundApplyAmount / 100}元` : '0'}}</div>
        </FormItem>
        <FormItem label="实际退款金额:" style="width:30%">
          <div>{{formData.refundAmount >= 0 ? `${formData.refundAmount / 100}元` : '0'}}</div>
        </FormItem>
        <FormItem label="用户实际到账金额:" style="width:30%">
          <div>{{formData.refundAmount >= 0 ? `${formData.refundAmount / 100}元` : '0'}}</div>
        </FormItem>
        <FormItem label="退款原因:" style="width:30%">
          <div>{{formData.refund_reason}}</div>
        </FormItem>
        <FormItem label="退款状态:" style="width:30%">
          <Tag v-if="formData.refundStatus && formData.refundStatus==='SC'" color="success">{{formData.refundStatusCN}}</Tag>
          <Tag v-else-if="formData.refundStatus && formData.refundStatus==='FL'" color="error">{{formData.refundStatusCN}}</Tag>
          <Tag v-else-if="formData.refundStatus && formData.refundStatus==='IG'" color="warning">{{formData.refundStatusCN}}</Tag>
          <Tag v-else color="default">{{formData.refundStatusCn}}</Tag>
        </FormItem>
        <FormItem label="退回平台优惠金额:" style="width:30%">
          <div>{{formData.couponAmount >= 0 ? `${ formData.couponAmount / 100 }元` : '0'}}</div>
        </FormItem>
        <FormItem label="退款渠道:" style="width:30%">
          <div>{{formData.orderSourceCn}}</div>
        </FormItem>
        <FormItem label="退款创建时间:" style="width:30%">
          <div>{{formData.createdDt}}</div>
        </FormItem>
        <FormItem label="交易时间:" style="width:30%">
          <div>{{formData.refundTime}}</div>
        </FormItem>
        <FormItem label="退款到账时间:" style="width:30%">
          <!-- <div>{{formData.refundTime}}</div> -->
        </FormItem>
        <FormItem label="子订单号:" style="width:30%">
          <div class="orderList" @click="bandleSubOrder(formData.subOrderId)">{{formData.subOrderId}}</div>
        </FormItem>
        <FormItem label="优惠总金额:" style="width:30%">
          <div>{{ formData.couponAmount ? `${formData.couponAmount / 100 }元` : '0'}}</div>
        </FormItem>
        <FormItem label="退款时子订单状态:" style="width:30%">
          <div>{{formData.subOrderStatusCn}}</div>
        </FormItem>
        <FormItem label="请求ip:" style="width:30%">
          <div>{{formData.ip}}</div>
        </FormItem>

        <!-- <FormItem prop="sn" label="退款ID12:" style="width:30%">
          <Input type="text" v-model="formData.sn" readonly />
        </FormItem>
        <FormItem prop="name" label="支付渠道退款单号:" style="width:30%">
          <Input type="text" v-model="formData.name" readonly />
        </FormItem>
        <FormItem prop="num" label="收单机构退款单号:" style="width:30%">
          <Input type="text" v-model="formData.num" readonly />
        </FormItem>
        <FormItem prop="legalPersonName" label="主订单号:" style="width:30%">
          <Input type="text" v-model="formData.legalPersonName" readonly />
        </FormItem>
        <FormItem prop="contactsName" label="子订单号:" style="width:30%">
          <Input type="text" v-model="formData.contactsName" readonly />
        </FormItem>
        <FormItem prop="phone" label="业务渠道来源:" style="width:30%">
          <Input type="text" v-model="formData.phone" readonly />
        </FormItem>
        <FormItem prop="email" label="批量退款批次号:" style="width:30%">
          <Input type="text" v-model="formData.email" readonly />
        </FormItem>
        <FormItem prop="businessMobile" label="商户名称:" style="width:30%">
          <Input type="text" v-model="formData.businessMobile" readonly />
        </FormItem>
        <FormItem prop="bankName" label="商品名称:" style="width:30%">
          <Input type="text" v-model="formData.bankName" readonly />
        </FormItem>
        <FormItem prop="bankAccount" label="申请退款金额:" style="width:30%">
          <Input type="text" v-model="formData.bankAccount" readonly />
        </FormItem>
        <FormItem prop="cityName" label="实际退款金额:" style="width:30%">
          <Input type="text" v-model="formData.cityName" readonly />
        </FormItem>
        <FormItem prop="address" label="退款状态:" style="width:30%">
          <Input type="text" v-model="formData.address" readonly />
        </FormItem>
        <FormItem prop="state" label="退款时间:" style="width:30%">
          <Select v-model="formData.state" readonly >
            <Option value="0">无效</Option>
            <Option value="1">有效</Option>
            <Option value="2">禁止开蓝票</Option>
            <Option value="3">禁止冲红</Option>
          </Select>
        </FormItem>
        <FormItem prop="drawer" label="退款原因:" style="width:30%">
          <Input type="text" v-model="formData.drawer" readonly />
        </FormItem>
        <FormItem prop="reviewer" label="退款申请时间:" style="width:30%">
          <Input type="text" v-model="formData.reviewer" readonly />
        </FormItem>
        <FormItem prop="payee" label="AppID:" style="width:30%">
          <Input type="text" v-model="formData.payee" readonly />
        </FormItem> -->
       <!-- <Authc permissions="invoice:taxpayerItems:query">
          <FormItem prop="items" label="商品列表:" style="width:90%">
            <ItemsListTable :taxpayerId="taxpayerId" />
          </FormItem>
        </Authc> -->
        </Card>
      </Form>
      <Button type="primary" @click="goBack">返回</Button>
    </Loading>
  </div>
</template>
<script>
import config from "@/utils/config";
import { namespace } from "../module/refundModule";
import {InputNumber,Input,Button,Select,Form,FormItem,Message,Option} from "view-design";
import Loading from "@/components/Loading";
//import RemoteSelect from "@/components/RemoteSelect";
//import RemoteTableSelect from "@/components/RemoteTableSelect";
import SearchBar from "@/components/SearchBar";
import Uuid from "uuid";
import Authc from "@/components/Authc";
//import ItemsListTable from '../../taxpayerItems/ItemsListTable';
export default {
  components: {InputNumber,Loading,Input,Button,Form,FormItem,Message,
    SearchBar,SearchBarItem: SearchBar.SearchBarItem,Select,Option,Authc},
  props: ["id"],
  beforeMount: async function() {
    let id = this.$route.query.id;
    let response = await this.$store.dispatch(`${namespace}/getDetail`, id);
    if (response.errorCode === 0) {
      this.formData = response.data;
    }
  },
  data: function() {
    let vm = this;
    return {
      taxpayerId: this.$route.params.id,
      formRef: Uuid.v1(),
      formData: {},
      columns: []
    };
  },
  methods: {
    bandleSubOrder (id) {
      this.$router.push({path: 'ChildOrderDetailForm', query: {
        id: id
      }})
    },
    goBack () {
      this.$router.go(-1);
    }
  },
  computed: {
    loading: function() {
      let result = this.$store.state[namespace].loading;
      return result;
    }
  }
};
</script>

<style>
</style>

<style lang="less" scoped>
.refundOrdersDetail {
  .title {
    border-bottom: 1px solid #999;
    margin-bottom: 10px;
    padding-bottom: 8px;
  }
  .orderList {
    color: blue;
    cursor: pointer;
  }
}
</style>
